import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
import {ModelinfoService} from './service/modelinfoService';
import {ActivatedRoute, Router} from '@angular/router';
import {ToastService} from 'ng-zorro-antd-mobile';
import {EventService} from '../common/service/event.service';


@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    // styleUrls: ['./home.component.less'],
})
export class HomeComponent implements OnInit {

    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute,
        public modelinfoService: ModelinfoService,
        private cdRef: ChangeDetectorRef,
        private toast: ToastService,
        private eventService: EventService,
    ) {
        // 需要接收ScanPage传递来的参数,并显示在视图中
        // 当前页面监听扫码事件广播
        this.eventService.eventEmit.on('scanPageCloseEvent', (result) => {
            console.log('执行 result=', result);
            this.scanText = result;
            alert(this.scanText);
        });
    }

    public scanText; // 扫码识别到的数据

    public data = [
        {
            img: '',
            title: '盾构机刀盘加工广告加工广告加工广告加工广告',
            content: '要求具备深加工资质深加工资质深加工资质深加工资质',
            com: '中铁工业中铁工业中铁工业中铁工业中铁工业',
            date: '2020.09.09 10:12'
        },
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
        {img: '', title: '盾构机刀盘加工广告', content: '要求具备深加工资质…', com: '中铁工业', date: '2020.09.09 10:12'},
    ];

    public noData = false; // 默认页面是有数据的-骨架屏中使用
    // JSON查询条件
    public filter;
    // 分页相关
    public records; // 筛选后的总数据条数
    public pageSize = 10;
    public currentIndex = 1;
    public PageSizeOptions = [12, 24, 48, 60];

    // 模糊查询所有字段
    public fuzzySearch = '';
    // 页面显示数据
    public dataSource = [];    // 后端请求返回的数据
    public PageSource = [];    // 页面展示的数据
    // 上滑
    public loadingSpinner = 'bubbles';             // 上拉加载数据时的图标
    public loadingMoreText = '上拉加载更多数据...';
    // 下拉
    public pullingText = '下拉刷新';
    public refreshingText = '正在刷新...';

    ngOnInit(): void {
        // 将当前筛选状态传入服务端进行查询
        this.filterParams();
        this.getListCondition();
    }

    // 筛选条件配置
    filterParams() {
        this.filter = {
            state: 1, // 移动端只显示已发布的数据 state: 1
            size: this.pageSize ? this.pageSize : 12,
            index: this.currentIndex ? this.currentIndex : 1,
            fuzzySearch: this.fuzzySearch
        };
    }

    // 查询-根据JSON
    getListCondition() {
        this.noData = false;
        this.filterParams();
        // console.log('this.filter = ', this.filter);
        this.modelinfoService.queryDataByJson(this.filter).then(res => {
            console.log('res = ', res);
            if (res.rows && res.rows.length > 0) {
                this.records = res.records;
                // 后端每次返回的数据
                this.dataSource = JSON.parse(JSON.stringify(res.rows));
                // 向页面显示数组中追加显示数据
                this.showPageListData(this.dataSource);
            } else {
                this.noData = true;
            }

        }, err => {
            this.noData = true;
        });
    }

    // 页面显示的数据列表
    showPageListData(data, cancel?: boolean) {
        if (cancel) {
            this.PageSource = [];
            this.noData = true;
            return;
        }
        if (data && data.length > 0) {
            data.forEach(item => {
                this.PageSource.push(item);
            });
        }
    }


    // 点击数据列表
    clickFun(data) {
        console.log('clickFun() data = ', data);
        if (data.current) {
            const arr = data.threeModelSet.filter((item) => {
                return item.id === data.current;
            });
            console.log('arr  =', arr);
            if (arr.length > 0) {
                this.router.navigate(['/tabs/home/threeDimensional'], {
                    queryParams: {
                        objpath: arr[0].modelUrl,
                        mtlpath: arr[0].relatedUrl
                    }
                }).then(res => {
                    console.log('res = ', res);
                });
            } else {
                this.toast.info('暂无设置当前模型', 1000);
            }

        } else {
            this.toast.info('暂无模型', 1000);
        }
    }

    // 下拉刷新/上滑加载下一页
    async doRefresh(event) {
        this.noData = false;
        switch (event.type) {
            // 下拉刷新
            case 'ionRefresh' :
                // 语句
                console.log('下拉刷新 event = ', event.type);
                // 下拉刷新
                this.currentIndex = 1;
                this.filterParams();
                await this.modelinfoService.queryDataByJson(this.filter).then(res => {
                    // console.log('res = ', res);
                    this.records = res.records;
                    // 后端每次返回的数据
                    this.dataSource = JSON.parse(JSON.stringify(res.rows));
                    // 页面显示数据清空
                    this.showPageListData(null, true);
                    // 向页面显示数组中追加显示数据
                    this.showPageListData(this.dataSource);
                    event.target.complete();
                }, err => {
                    event.target.complete();
                });
                break; //可选
            // 上滑加载下一页
            case 'ionInfinite' :
                // 语句
                console.log('上拉加载下一页 event = ', event.type);
                if (this.records > this.PageSource.length) {
                    this.loadingMoreText = '上拉加载更多数据...';
                    this.currentIndex++;
                    this.filterParams();
                    // console.log('开始异步操作');
                    await this.modelinfoService.queryDataByJson(this.filter).then(res => {
                        // console.log('res = ', res);
                        this.records = res.records;
                        // 后端每次返回的数据
                        this.dataSource = JSON.parse(JSON.stringify(res.rows));
                        // 向页面显示数组中追加显示数据
                        this.showPageListData(this.dataSource);
                        event.target.complete();
                    }, err => {
                        event.target.complete();
                    });
                } else {
                    this.loadingSpinner = 'null';
                    this.loadingMoreText = '没有更多数据了~~';
                    setTimeout(() => {
                        event.target.complete();
                    }, 1000);
                }
                break; //可选
            default : //可选
            //语句
        }
    }

}
